<template>
  <div class="pie-container">
    <!-- 浏览器版本错误警告页面 -->
    <PIENavigatorWarn v-if="navigatorWarnShow"></PIENavigatorWarn>
    <!--头部-->
    <header v-show="isDemonstration">
      <PIEHeader :activeMenu="activeMenu" :groupList="groupList" @navChange="navChange" @demonstration="demonstration">
      </PIEHeader>
    </header>
    <!--内容区域-->

    <article class="pie-article" :class="!isDemonstration ? 'pie-article-else' : ''">
      <!--左边菜单-->
      <aside class="pie-aside" v-show="isDemonstration">
        <div class="pie-aside-top">
          <div class="top-box">
            <div class="tab-img-box flex-center" :class="{ 'be-gary': activeName == 'source' }"
              @click="handleSourceTab">
              <img :src="sourceTab" class="img-box" />
            </div>
            <div class="tab-img-box flex-center" :class="{ 'be-gary': activeName == 'layer' }" @click="handleLayerTab">
              <img :src="layerTab" class="img-box" />
            </div>
          </div>
        </div>
        <keep-alive>
          <PIEWorkSpace :isDataShow="isDataShow" v-if="EarthonLoad && activeName == 'source'"></PIEWorkSpace>
          <PIELayerManage v-else-if="EarthonLoad && activeName == 'layer'" :isDataShow="isDataShow"
            @handleNodeClick="handleNodeClick" :treeData="layerList"></PIELayerManage>
        </keep-alive>
      </aside>
      <!--中间地球-->
      <PIEMap class="map-view" ref="mapView" @onload="onload" @navigatorWarnShow="navigatorWarn"
        @mousewheelEvent="handleCanvasMouseWheel" @mousemove="handleCanvasMouseWheel">
      </PIEMap>
      <div id="children1"></div>
      <!-- 实时信息 -->
      <div class="pie-map-left" :class="{ demonstration: !isDemonstration }">
        <span class="left-menu-item">X:{{ screenPoint.x }},Y:{{ screenPoint.y }}</span>
        <span class="left-menu-item">GCS_CGCS_2000</span>
        <span class="left-menu-item">{{ lat }},{{ lon }}, {{ height }}米 {{ scale }}</span>
      </div>
      <!-- 搜索定位 -->
      <PIESearch @flyToLoad="flyToLoad" v-show="isDemonstration"></PIESearch>
      <!-- 右侧工具栏 -->
      <PIEMapTool @zoomOut="zoomOut" @zoomIn="zoomIn"></PIEMapTool>
      <!-- <aside class="pie-aside">
        <WorkBench :isDataShow="isDataShow" @handleNodeClick='handleNodeClick' :treeData="treeData"> </WorkBench>
      </aside>-->
    </article>
    <!--脚部-->
    <footer class="pie-footer" v-show="isDemonstration">
      <div class="pie-footer-menu">
        <span :class="`pie-footer-menu-item iconfont icon-model ${isBigData ? 'selected' : 'noSelected'
        }`" title="大数据" @click="handleSwitchBigData"></span>
        <span class="pie-footer-menu-item iconfont icon-show" title="演播" @click="demonstration"></span>
        <span class="pie-footer-menu-item iconfont icon-zizhufenxi" title="演播"></span>
      </div>
    </footer>
    <PIEBigDataPanel v-if="EarthonLoad && isBigData" />
    <template v-if="EarthonLoad">
      <component v-for="comp in widgets" :key="comp.keyId" :style="comp.styles" :is="comp.name" :class="comp.comClass"
        v-bind="comp._props" />
    </template>
    <WelcomePanel :close="welcomeClose" :mypercentage="myPercentage" :progressShow="isProgressShow"></WelcomePanel>
  </div>
</template>
<script setup lang="ts">
import { useHandler } from "./hooks";
import PIEBigDataPanel from "~/PIEBigDataPanel";

const {
  mapView,
  activeMenu,
  isRightMenuShow,
  groupList,
  isDataShow,
  widgets,
  EarthonLoad,
  layerList,
  handleNodeClick,
  navChange,
  onload,
  zoomOut,
  zoomIn,
  screenFullEnters,
  exitScreenFull,
  isFullScreen,
  navigatorWarn,
  navigatorWarnShow,
  isDemonstration,
  demonstration,
  activeName,
  handleSourceTab,
  handleLayerTab,
  sourceTab,
  layerTab,
  flyToLoad,
  lat,
  lon,
  handleCanvasMouseWheel,
  scale,
  height,
  screenPoint,
  welcomeClose,
  myPercentage,
  isProgressShow,
  isBigData,
  handleSwitchBigData,
} = useHandler();
</script>

<style lang="less" scoped>
@import url("@/styles/variables.less");
@pie-footer-h: 35px;

.pie-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .pie-article {
    display: flex;
    height: calc(100% - @header-h - @pie-footer-h);
    margin-top: @header-h;

    .pie-aside {
      width: 266px;

      .pie-aside-top {
        .top-box {
          height: 43px;
          margin-left: 16px;
          margin-right: 20px;
          border-bottom: 1px solid #ebebeb;

          .tab-img-box {
            cursor: pointer;
            width: 28px;
            height: 24px;

            .img-box {
              width: 20px;
              height: 20px;
            }

            &:hover {
              background: #ebebeb;
            }
          }

          .be-gary {
            background: #ebebeb;
          }
        }
      }
    }

    .map-view {
      position: relative;
      width: 100%;
      height: 100%;
      // margin-top: 150px;

      :deep(canvas) {
        width: 100%;
        height: 100%;
      }
    }

    .pie-map-left {
      position: absolute;
      bottom: 55px;
      left: 290px;
      z-index: 10;
      display: flex;
      flex-direction: column;
      color: #fff;
      font-size: 12px;
      margin-top: 10px;

      .left-menu-item {
        margin-top: 3px;
        font-size: 12px;
      }
    }

    .demonstration {
      left: 30px;
    }
  }

  .pie-article-else {
    height: 100%;
    margin-top: 0;
  }

  .pie-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    height: @pie-footer-h;
    width: 100%;
    z-index: 10;
    bottom: 0;
    padding: 0 20px;
    background: @global-bg;
    border: 1px solid #dadbda;

    .selected {
      color: @font-color-selected;
    }

    .no-selected {
      color: @font-color;
    }

    &-menu {
      justify-content: space-between;
      font-size: 12px;
      color: #494c4a;
    }

    &-menu-item {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

// .cover-control1 {
//   //  width: 200px;
//   position: absolute;
//   left: 5%;
//   top: 18%;
// }

.cover-control {
  //  width: 200px;
  position: absolute;
  left: 5%;
  top: calc(18% + 360px);
}

#children1 {
  z-index: 90;
  // background: blue;
  // width: 200px;
  // height: 600px;
  // overflow: hidden;
}
</style>
